<template>
  <div class="search-suggestion">
    <van-cell icon="search" v-for="(str,index) in suggestions" :key="index"
      @click="$emit('search',str)">
      <div slot="title" v-html="highlight(str)"></div>
    </van-cell>
  </div>
</template>

<script>
import { geSearchSuggestions } from '@/api/search.js'
import { debounce } from 'lodash'

/*
const fn = _.debounce(function () {
  console.log('sdal')
}, 1000)
fn()
fn()
// 只输出一次,时间间隔不一样，才能调用第二次
 */

export default {
  name: 'SearchSuggestion',
  components: {},
  data () {
    return {
      suggestions: []
    }
  },
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  // 计算属性
  computed: {},
  // 监控data中的数据变化
  watch: {
    // 监听这个属性，一变化就调用相应方法
    // 第一次不调用
    // searchText () {
    //   console.log('ss')
    // }
    // 采用监听完整写法
    searchText: {
      // 添加文本为空时不发送请求
      handler: debounce(async function () {
        if (this.searchText.trim() === '') {
          return
        }
        const { data } = await geSearchSuggestions(this.searchText)
        this.suggestions = data.data.opinions
      }, 300),
      // async handler () {
      //   const { data } = await geSearchSuggestions(this.searchText)
      //   this.suggestions = data.data.opinions
      // },
      // 参照官方文档，在侦听开始之后立即调用
      immediate: true
    }
  },
  methods: {
    highlight (str) {
      // /this.searchText/gi 错误的写法
      // 会被当成字符串处理
      // 需要使用正则表达式的构造函数 RegExp(字符串， 匹配模式)=》返回正则表达式
      return str.replace(new RegExp(this.searchText, 'gi'), `<span style="color:red">${this.searchText}</span>`)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped lang='less'>
</style>
